<!--轮播图-->
<template>
  <div>
    <div class="block">
      <!--      <span class="demonstration">Click 指示器触发</span>-->
      <el-carousel trigger="click" height="400px">
        <el-carousel-item v-for="(item,index) in SlideShowList" :key="index">
          <!--          <h3 class="small">{{ item }}</h3>-->
          <div class="img" :style="{backgroundImage: 'url('+ item.imgUrlPc +')'}"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import {getImglist} from "@/api/index-api";

export default {
  name: "SlideShow",
  // props: {
  //   SlideShowList: Array
  // },
  data() {
    return {
      SlideShowList: ''
    }
  },

  created() {
    getImglist().then(res => {
      // console.log(res.data)
      this.SlideShowList = res.data

    })
    // console.log(this.SlideShowList)
  }
}
</script>

<style scoped lang="less">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.img {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
}

</style>